<section id="intro">
<header>
	<div id="content-slider">
    	<div id="slider">
        	<div id="mask">
            <ul>
           	<li id="first" class="firstanimation">
            <a href="#">
            <img src="<?php echo base_url(); ?>assets/images/slide-1.jpg" alt="Cougar"/>
            </a>
            <!-- <div class="tooltip">
            <h1>This is a mouseover tooltip the banner.</h1>
            </div> -->
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img src="<?php echo base_url(); ?>assets/images/slide-2.jpg" alt="Lions"/>
            </a>
            </li>
            
            <li id="third" class="thirdanimation">
            <a href="#">
            <img src="<?php echo base_url(); ?>assets/images/slide-3.jpg" alt="Snowalker"/>
            </a>
            </li>
                        
            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img src="<?php echo base_url(); ?>assets/images/slide-4.jpg" alt="Howling"/>
            </a>
            </li>
                        
            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img src="<?php echo base_url(); ?>assets/images/slide-5.jpg" alt="Sunbathing"/>
            </a>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</header>
</section>